<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>路由 入门案例 </title>
    <!-- 用于控制用户程序跳转过程 根据用户的请求url地址 展现特定的组件（页面）信息 -->
    <!--
      1.导包
      2.定义路由链接地址
      3.定义路由填充位置
      4.定义组件
      5.定义路由规则（路由对象）
      6.路由对象挂载到Vue对象-->
</head>
<body>
<div id="app">
    <a href="设定跳转的地址" target="a">????</a>
    <a href="#a">a</a>
    <!-- 1.router-link 编译后会转化为a标签
 2.关键字to 被编译后转化为href属性-->
    <!-- 二。定义路由连接地址 -->
    <router-link to="/user">用户</router-link>
    <router-link to="/dog">狗狗</router-link>


    <!-- 三。指定路由填充位置 未来展现组件信息-->
    <router-view></router-view>

</div>


<template id="userTem">
    <div>usertem<h3>用户信息</h3>
    </div>
</template>
<template id="dogTem">
    <div>dogtem<h3>狗狗信息</h3>
    </div>
</template>
<!-- 一.导入路由的js   先导入 vue.js 再导入路由.js  必须按照顺序-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script>
    // 第四步：准备组件 定义路由对象
    let userCom = {
        template: `#userTem`
    }
    let dogCom = {
        template: `#dogTem`
    }
    //五：创建路由规则 即路由对象
    // routes:路由的多个映射通过该属性进行定义
    //path定义路径
    //component定义组件

    let vueRouter = new VueRouter({
        //
        routes: [{
            path: `/user`,
            component: userCom
        },
            {
                path: `/dog`,
                component: dogCom
            }
        ]
    })

    const APP = new Vue({
        el: `#app`,
        components: {
            userCom,
            dogCom
        },
        //六：最后一步 实现路由的挂载
        router: vueRouter
    })
</script>
</body>
</html>
